﻿<Window x:Class="WpfApplication1.MainWindow1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
    <Window.Resources>
        <Color x:Key="ControlLightColor">White</Color>
        <Color x:Key="GlyphColor">#FF444444</Color>
        <Color x:Key="SelectedBackgroundColor">#FF292929</Color>
        <Color x:Key="SelectedUnfocusedColor">#FF292929</Color>
        <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
        
        <Style TargetType="ListBox">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Border x:Name="Border" Background="{TemplateBinding Background}">
                            <ScrollViewer Margin="0" Padding="0" Focusable="False">
                                <StackPanel Margin="0" IsItemsHost="True" />
                            </ScrollViewer>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter TargetName="Border" Property="Background">
                                    <Setter.Value>
                                        <SolidColorBrush Color="{StaticResource DisabledControlLightColor}" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="False" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ModulerItem" TargetType="ListBoxItem">
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="Border" Height="50" BorderThickness="0,0,0,1" Background="#353535" BorderBrush="#3a3a3a" SnapsToDevicePixels="True">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="TopLayer" Storyboard.TargetProperty="Width" To="180" Duration="0:0:.7" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="0">
                                <Border x:Name="TopLayer" Background="#292929" Width="0" HorizontalAlignment="Left" />
                                <ContentPresenter />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
    </Window.Resources>
    <Grid>
        <Grid x:Name="mouse" Width="180" Background="#3a3a3a" FlowDirection="RightToLeft">
            <!--<Grid.Style>
                <Style TargetType="Grid">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation AccelerationRatio="1" Storyboard.TargetName="lbHeader" Storyboard.TargetProperty="Width" From="180" To="50" Duration="0:0:.6" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation AccelerationRatio="1" Storyboard.TargetName="lbHeader" Storyboard.TargetProperty="Width" From="50" To="180" Duration="0:0:.6" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>-->
            <Grid.Triggers>
                <EventTrigger RoutedEvent="ListBox.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation AccelerationRatio="1" Storyboard.TargetName="lbHeader" Storyboard.TargetProperty="Width" From="180" To="50" Duration="0:0:.6" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ListBox.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation AccelerationRatio="1" Storyboard.TargetName="lbHeader" Storyboard.TargetProperty="Width" From="50" To="180" Duration="0:0:.6" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
            <Grid Width="130" HorizontalAlignment="Right">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                
                <Label Grid.Row="0" Height="30" Content="{Binding ElementName=lbHeader, Path=SelectedItem.Name}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="Wheat" FontFamily="AdvertisingMedium" FontSize="14" />
                
                <ListBox x:Name="Detail" Grid.Row="1" Background="#424242" Width="130" BorderThickness="0"  Foreground="#999999">
                    <ListBox.Resources>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="SnapsToDevicePixels" Value="True" />
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="ListBoxItem">
                                        <Border x:Name="Border" Height="68" BorderThickness="0,0,0,1" SnapsToDevicePixels="True" Background="#424242" BorderBrush="#353535">
                                            <VisualStateManager.VisualStateGroups>
                                                <VisualStateGroup x:Name="CommonStates">
                                                    <VisualState x:Name="Normal" />
                                                    <VisualState x:Name="MouseOver">
                                                        <Storyboard>
                                                            <DoubleAnimation Storyboard.TargetName="TopLayer" Storyboard.TargetProperty="Width" To="130" AccelerationRatio="1" Duration="0:0:.5" />
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="Disabled" />
                                                </VisualStateGroup>
                                                <VisualStateGroup x:Name="SelectionStates">
                                                    <VisualState x:Name="Unselected" />
                                                    <VisualState x:Name="Selected">
                                                        <Storyboard>
                                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
                                                            </ColorAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                    <VisualState x:Name="SelectedUnfocused">
                                                        <Storyboard>
                                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
                                                            </ColorAnimationUsingKeyFrames>
                                                        </Storyboard>
                                                    </VisualState>
                                                </VisualStateGroup>
                                            </VisualStateManager.VisualStateGroups>
                                            <Grid>
                                                <Border x:Name="TopLayer" Background="#292929" Width="0" HorizontalAlignment="Left" />
                                                <ContentPresenter Margin="8" />
                                            </Grid>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.Resources>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Image Grid.Row="0" Width="32" Height="32" Source="{Binding Path=Image}" />
                                <TextBlock Grid.Row="1" HorizontalAlignment="Center" Margin="0,0,0,0" Text="{Binding Path=Name}" FontFamily="AdvertisingBold" FontSize="11" />
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>

            <ListBox x:Name="lbHeader" 
                     BorderThickness="1" 
                     Width="180" 
                     VerticalAlignment="Stretch" 
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                     HorizontalAlignment="Left" 
                     Background="#353535" 
                     Foreground="#999999" 
                     ItemsSource="{StaticResource source1}">
                <ListBox.Resources>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="SnapsToDevicePixels" Value="True" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <Border x:Name="Border" Height="50" BorderThickness="0,0,0,1" Background="#353535" BorderBrush="#3a3a3a" SnapsToDevicePixels="True">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Normal" />
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="TopLayer" Storyboard.TargetProperty="Width" To="180" Duration="0:0:.7" />
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Disabled" />
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="SelectionStates">
                                                <VisualState x:Name="Unselected" />
                                                <VisualState x:Name="Selected">
                                                    <Storyboard>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />
                                                        </ColorAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="SelectedUnfocused">
                                                    <Storyboard>
                                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />
                                                        </ColorAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Grid Margin="0">
                                            <Border x:Name="TopLayer" Background="#292929" Width="0" HorizontalAlignment="Left" />
                                            <ContentPresenter />
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.Resources>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Path Grid.Column="0" Margin="9" Width="32" Height="32" Fill="#999999" Data="{Binding Path=Icon}" Stretch="Fill" />
                            <TextBlock Grid.Column="1" Margin="13,0,5,0" FontSize="24" VerticalAlignment="Center" Text="{Binding Path=Name}" FontFamily="AdvertisingMedium" />
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
        <Grid Width="1" Margin="0,0,258,0">
            <Grid.Effect>
                <DropShadowEffect Direction="180" ShadowDepth="0" />
            </Grid.Effect>
            <Grid.RowDefinitions>
                <RowDefinition Height="10" />
                <RowDefinition Height="*" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            
            <Rectangle Grid.Row="0">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#00000000" Offset="0" />
                        <GradientStop Color="#19000000" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Grid.Row="1" Fill="#19000000" />
            <Rectangle Grid.Row="2">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#19000000" Offset="0" />
                        <GradientStop Color="#00000000" Offset="1" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Grid>
</Window>
